<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<style>
  .avatar-space {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: white;
    display: flex;
  }

  .avatar-card {
    position: absolute;
    top: 50%;
    transform: translateY(-80%);
    left: 20%;
    color: #6c6a6a;
  }

  .avatar-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    font-size: 15px;
  }

  .avatar-left {
    width: 200px;
    height: 100px;
    background-color: rgba(217, 212, 212, 0.3);
    border-radius: 5px;
    margin-right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avatar-left:hover {
    cursor: pointer;
  }

  .upload {
    width: 24px;
    margin-right: 5px;
  }

  .avatar_right {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 40px;
    border-left: 1px solid #6c6a6a;
  }

  #current-avatar {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    border-radius: 50%;
  }

  .submit {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    font-size: 18px;
  }

  .submit button {
    background-color: #3498db;
    color: white;
    padding: 8px 30px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .submit button:hover {
    background-color: #0c83ff; /* 鼠标悬停时改变背景颜色 */
  }
</style>

<div class="avatar-space">

  <div class="avatar-card">
    <div class="avatar-form">
      <div class="avatar-left" onclick="triggerUpload()">
        <img class="upload" src="assets/file_imgs/本地图片.png" alt="上传图片">
        <span>上传本地图片</span>
        <input type="file" id="fileInput" style="display: none;" onchange="handleFileChange(event)">
      </div>
      <div class="avatar_right">
        <img id="current-avatar" src="${user_key.avatar}" alt="用户头像">
        <span>当前头像</span>
      </div>
    </div>
    <div class="submit">
      <button onclick="uploadAvatar()">提交</button>
    </div>
  </div>

</div>

<script>
  function triggerUpload() {
    document.getElementById('fileInput').click();
  }

  function handleFileChange(event) {
    if (event.target.files.length > 1) {
      alert('只能上传一个文件')
      return
    }
    var file = event.target.files[0];
    if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
      event.target.value = ''
      alert('请上传图片')
      return
    }

    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
      var img = document.getElementById('current-avatar');
      img.src = e.target.result;
    }
  }

  function uploadAvatar() {
    var fileInput = document.getElementById('fileInput')
    if (fileInput.files.length > 0) {
      var file = fileInput.files[0];
      var formData = new FormData();
      formData.append('file', file);

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'file?type=avatar', true);

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          window.location.href = 'Index.jsp'
        }
      }

      xhr.send(formData);

    } else {
      alert('请选择要上传的文件');
    }
  }
</script>
